import { FlexLayoutModule } from '@angular/flex-layout';
import { MdDialog, MdDialogRef, MdDialogConfig } from "@angular/material";
import { SharedModule } from './../../../shared.module';
import { CommonModule } from '@angular/common';
import { MaterialModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { Component } from '@angular/core';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

export class RemarkService {
    static Current = new RemarkService();
    private remark: Remark;
    dialogRef: MdDialogRef<Remark>;
    config: MdDialogConfig = {
        disableClose: false,
        width: '100%',
        position: {
            top: '0',
            left: '0',
            right: '0',
            bottom: ''
        }
    }
    regist(remark: Remark) {
        this.remark = remark;
    }

    open(dialog: MdDialog, description?: string, remarks?: string[]) {
        this.dialogRef = dialog.open(Remark, this.config);
        this.remark.visible = true;
        this.remark.description = description;
        this.remark.remarks = remarks;
        return new Promise((resolve, reject) => {
            this.dialogRef.afterClosed().subscribe(text => {
                this.dialogRef = null;
                resolve(text);
            });
        })
    }
}

@Component({
    selector: 'div[remark]',
    template: `
        <md-dialog-header>
            <md-toolbar class="color-white bgcolor-black">
                <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="100%" class="color-white">
                    <div class="i-arrow-back header-icon" (click)="cancel()"></div>
                    <div class="padding-lr-5">备注</div>
                    <div class="i-check header-icon" (click)="ok()"></div>
                </div>
            </md-toolbar>
        </md-dialog-header>
        <md-dialog-content>
            <div class="padding-5 remark-content">
                <md-input-container class="pct100">
                    <input mdInput placeholder="备注" [(ngModel)]="description"/>
                </md-input-container>
                <div fxLayout="row" fxLayoutWrap="wrap">
                    <div class="grid padding-5 remark-list" *ngFor="let item of remarks">
                        {{item}}
                    </div>
                </div>
            </div>
        </md-dialog-content>
    `
})
export class Remark {
    visible: boolean;
    description: string;
    remarks: string[];
    constructor(
        public dialogRef: MdDialogRef<Remark>,
    ) {
        RemarkService.Current.regist(this);
    }

    onResult;

    ok() {
        this.dialogRef.close(this.description);
    }

    cancel() {
        this.dialogRef.close(null);
    }
}

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        MaterialModule,
        FlexLayoutModule
    ],
    declarations: [
        Remark
    ],
    entryComponents: [Remark],
    exports: [Remark],
    providers: [RemarkService],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class RemarkModule { }